<style scoped>
 .map_img_box{
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-image: url(../assets/img/map_img.png);
     background-size: 100% 100%;
     position: relative;
 }
 .map_list{
    position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
   cursor: pointer
 }
 .map_text_con{
     z-index: 99;
  position: relative;
  min-width: 54px;
  min-height: 54px;
  font-size: 12px;
 }
 .num{
     color: #24497F;
       font-size: 13px;
 }
</style>
<template>
  <div style="height:100%;position:relative;">
     <div class="map_img_box" :style="imgStyle" >
          <div class="map_list" :style="{left:item.x+'%',top:item.y+'%'}" v-for="(item,i) in dataPng" :key="i">
             <div class="map_text_con">
                  <div class="map_num"><span class="num">{{item.value||0}}{{item.unit}}</span></div>
                  <div class="map_txt">{{item.name}}</div>
             </div>
          </div>
     </div>
  </div>
</template>
<script>
export default {
  name: "mapPng",
  props:{
   data: Array,
   jsonUrl: String,
   imgUrl:String,
  },
  data(){
      return {
        dataPng:[],
      }
  },
  computed:{
    imgStyle(){
       return {
        "background-image": 'url('+ this.imgUrl+ ')'
      }
    }
  },
  watch: {
      imgUrl(){
           this.init();
      },
    data: {
      handler: function (val) {
        if (val) {
          this.data = val;
          this.init();
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
      var _this=this
        axios({
            url:this.jsonUrl,
        }).then(res =>{
          var data=res.data
           for(const key in data){
              (this.data||[]).map((item,i) =>{
                  if(item.areacode==key){
                     _this.dataPng.push({
                           name:item.name||"",
                           areacode:item.areacode,
                           value:item.value||0,
                           unit:item.unit,
                           x:data[key].x,
                           y:data[key].y
                     })
                  }
               })
            }
        })
    },
  },
  mounted() {
    this.init();
  },

};
</script>
